<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">

<!-- 文章的侧边栏点赞收藏评论浮窗 -->
<div th:fragment="tool_bar(article)">

    <div class="article-suspended-panel article-suspended-panel">
        <svg xmlns="http://www.w3.org/2000/svg" style="display:none;" class="">
            <symbol id="icon-collect" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd"
                      d="M5.24287 18.3845C4.89724 18.5507 4.48229 18.4053 4.31605 18.0596C4.26029 17.9437 4.23783 17.8146 4.25117 17.6866L4.75725 12.8332C4.77762 12.6379 4.71431 12.443 4.583 12.297L1.29207 8.63594C1.03567 8.35071 1.05905 7.91164 1.34428 7.65524C1.43464 7.574 1.54475 7.5179 1.66358 7.49254L6.47789 6.46509C6.66998 6.42409 6.83572 6.30367 6.93407 6.13365L9.39894 1.87248C9.59098 1.54049 10.0158 1.42704 10.3478 1.61907C10.453 1.67992 10.5403 1.76729 10.6012 1.87248L13.0661 6.13365C13.1644 6.30367 13.3301 6.42409 13.5222 6.46509L18.3365 7.49254C18.7116 7.57259 18.9508 7.94155 18.8707 8.31664C18.8454 8.43547 18.7893 8.54557 18.708 8.63594L15.4171 12.297C15.2858 12.443 15.2225 12.6379 15.2429 12.8332L15.7489 17.6866C15.7887 18.0681 15.5117 18.4096 15.1303 18.4493C15.0023 18.4627 14.8732 18.4402 14.7572 18.3845L10.3011 16.2412C10.1108 16.1497 9.8893 16.1497 9.69906 16.2412L5.24287 18.3845Z"
                ></path>
            </symbol>
            <symbol id="icon-comment" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd"
                      d="M4.62739 1.25C2.9347 1.25 1.5625 2.6222 1.5625 4.31489L1.56396 12.643C1.56403 14.3356 2.9362 15.7078 4.62885 15.7078H6.48326L6.93691 17.6869L6.93884 17.6948C7.16894 18.6441 8.28598 19.0599 9.08073 18.4921L12.7965 15.7078H15.5001C17.1928 15.7078 18.565 14.3355 18.565 12.6428L18.5635 4.31477C18.5635 2.62213 17.1913 1.25 15.4986 1.25H4.62739ZM5.98265 9.89255C6.68783 9.89255 7.2595 9.32089 7.2595 8.61571C7.2595 7.91053 6.68783 7.33887 5.98265 7.33887C5.27747 7.33887 4.70581 7.91053 4.70581 8.61571C4.70581 9.32089 5.27747 9.89255 5.98265 9.89255ZM9.95604 9.89255C10.6612 9.89255 11.2329 9.32089 11.2329 8.61571C11.2329 7.91053 10.6612 7.33887 9.95604 7.33887C9.25086 7.33887 8.6792 7.91053 8.6792 8.61571C8.6792 9.32089 9.25086 9.89255 9.95604 9.89255ZM15.2124 8.61571C15.2124 9.32089 14.6407 9.89255 13.9355 9.89255C13.2304 9.89255 12.6587 9.32089 12.6587 8.61571C12.6587 7.91053 13.2304 7.33887 13.9355 7.33887C14.6407 7.33887 15.2124 7.91053 15.2124 8.61571Z"
                ></path>
            </symbol>
            <symbol id="icon-zan" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd"
                      d="M13.0651 3.25923C12.6654 2.21523 12.1276 1.60359 11.4633 1.40559C10.8071 1.21 10.2539 1.48626 9.97848 1.67918C9.43962 2.05668 9.17297 2.64897 9.0009 3.12662C8.93522 3.30893 8.87504 3.50032 8.82077 3.67291L8.82077 3.67292C8.80276 3.73019 8.78541 3.78539 8.76872 3.8375C8.6974 4.06017 8.63455 4.23905 8.56561 4.38315C8.07104 5.41687 7.64014 6.034 7.2617 6.43277C6.89154 6.8228 6.5498 7.0275 6.18413 7.21038C5.8887 7.35813 5.69369 7.66144 5.69365 8.00211L5.69237 17.3908C5.6923 17.8783 6.08754 18.2736 6.57511 18.2736H14.8382C15.2621 18.2736 15.5829 18.1393 15.8149 17.9421C15.9234 17.8497 15.9985 17.7554 16.0484 17.6856C16.0695 17.6561 16.088 17.6282 16.0983 17.6126L16.1017 17.6075L16.1033 17.6051L16.1194 17.5857L16.1428 17.5478C16.913 16.3019 17.4472 15.3088 17.8659 14.1183C18.3431 12.7613 18.5849 11.5853 18.6874 10.6685C18.7871 9.77617 18.7612 9.07318 18.6558 8.68779C18.5062 8.14118 18.138 7.82653 17.7668 7.66617C17.4231 7.51771 17.0763 7.49836 16.8785 7.49807L13.1134 7.44551C13.662 5.19751 13.31 3.89889 13.0651 3.25923ZM1.251 8.0848C1.22726 7.5815 1.62891 7.16046 2.13277 7.16046H3.4408C3.92832 7.16046 4.32354 7.55568 4.32354 8.04321V17.4303C4.32354 17.9178 3.92832 18.313 3.4408 18.313H2.57554C2.10419 18.313 1.71599 17.9427 1.69378 17.4718L1.251 8.0848Z"
                ></path>
            </symbol>
            <symbol id="icon-report" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd"
                      d="M10.8389 1.89381C11.0873 2.03868 11.2939 2.24532 11.4388 2.49366L18.9369 15.0065C19.4007 15.8015 19.1322 16.8221 18.3371 17.2859C18.0822 17.4346 17.7924 17.5129 17.4973 17.5129H2.50041C1.57993 17.5129 0.83374 16.7667 0.83374 15.8462C0.83374 15.5512 0.912088 15.2614 1.06078 15.0065L8.5595 2.49366C9.0233 1.69857 10.0438 1.43001 10.8389 1.89381ZM10.3118 13.3459C10.6283 13.3459 10.8848 13.6025 10.8848 13.9189V14.4918C10.8848 14.8082 10.6283 15.0647 10.3118 15.0647H9.73893C9.42252 15.0647 9.16602 14.8082 9.16602 14.4918V13.9189C9.16602 13.6025 9.42252 13.3459 9.73893 13.3459H10.3118ZM10.8356 7.09513C10.8356 6.86502 10.6491 6.67847 10.419 6.67847H9.58512C9.35501 6.67847 9.16846 6.86502 9.16846 7.09513V12.0956C9.16846 12.3257 9.35501 12.5123 9.58512 12.5123H10.419C10.6491 12.5123 10.8356 12.3257 10.8356 12.0956V7.09513Z"
                ></path>
            </symbol>
            <symbol id="icon-immerse" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd"
                      d="M0.25 1C0.25 0.585786 0.585786 0.25 1 0.25H4C4.41421 0.25 4.75 0.585786 4.75 1C4.75 1.41421 4.41421 1.75 4 1.75H1.75V4C1.75 4.41421 1.41421 4.75 1 4.75C0.585786 4.75 0.25 4.41421 0.25 4V1ZM0.25 19C0.25 19.4142 0.585786 19.75 1 19.75H4C4.41421 19.75 4.75 19.4142 4.75 19C4.75 18.5858 4.41421 18.25 4 18.25H1.75V16C1.75 15.5858 1.41421 15.25 1 15.25C0.585786 15.25 0.25 15.5858 0.25 16V19ZM19 0.25C19.4142 0.25 19.75 0.585786 19.75 1V4C19.75 4.41421 19.4142 4.75 19 4.75C18.5858 4.75 18.25 4.41421 18.25 4V1.75H16C15.5858 1.75 15.25 1.41421 15.25 1C15.25 0.585786 15.5858 0.25 16 0.25H19ZM19.75 19C19.75 19.4142 19.4142 19.75 19 19.75H16C15.5858 19.75 15.25 19.4142 15.25 19C15.25 18.5858 15.5858 18.25 16 18.25H18.25V16C18.25 15.5858 18.5858 15.25 19 15.25C19.4142 15.25 19.75 15.5858 19.75 16V19ZM7 5C5.89543 5 5 5.89543 5 7V13C5 14.1046 5.89543 15 7 15H13C14.1046 15 15 14.1046 15 13V7C15 5.89543 14.1046 5 13 5H7Z"
                ></path>
            </symbol>
            <symbol id="icon-share" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd"
                      d="M16 5.5C16 7.15685 14.6569 8.5 13 8.5C12.0747 8.5 11.2439 8.09175 10.6585 7.44721L8.47639 8.86396C8.48504 8.97365 8.48997 9.08578 8.48997 9.19969C8.48997 9.31361 8.48504 9.42573 8.47639 9.53542L10.6585 10.9522C11.2439 10.3076 12.0747 9.89938 13 9.89938C14.6569 9.89938 16 11.2425 16 12.8994C16 14.5562 14.6569 15.8994 13 15.8994C11.3431 15.8994 10 14.5562 10 12.8994C10 12.7854 10.0049 12.6733 10.0145 12.5636L7.83242 11.1469C7.24702 11.7914 6.41623 12.1997 5.48997 12.1997C3.83312 12.1997 2.48997 10.8565 2.48997 9.19969C2.48997 7.54284 3.83312 6.19969 5.48997 6.19969C6.41623 6.19969 7.24702 6.60794 7.83242 7.25248L10.0145 5.83573C10.0049 5.72604 10 5.61392 10 5.5C10 3.84315 11.3431 2.5 13 2.5C14.6569 2.5 16 3.84315 16 5.5ZM13 7.1C13.8837 7.1 14.6 6.38366 14.6 5.5C14.6 4.61634 13.8837 3.9 13 3.9C12.1163 3.9 11.4 4.61634 11.4 5.5C11.4 6.38366 12.1163 7.1 13 7.1ZM5.48997 10.7997C6.37363 10.7997 7.08997 10.0833 7.08997 9.19969C7.08997 8.31603 6.37363 7.59969 5.48997 7.59969C4.60631 7.59969 3.88997 8.31603 3.88997 9.19969C3.88997 10.0833 4.60631 10.7997 5.48997 10.7997ZM14.6 12.8994C14.6 13.783 13.8837 14.4994 13 14.4994C12.1163 14.4994 11.4 13.783 11.4 12.8994C11.4 12.0157 12.1163 11.2994 13 11.2994C13.8837 11.2994 14.6 12.0157 14.6 12.8994Z"
                ></path>
            </symbol>
        </svg>
        <!-- 点赞 -->
        <div th:badge="${article.count.praiseCount > 0 ? article.count.praiseCount: ''}"
             th:class="'panel-btn ' + ${article.praised ? ' active': ''} + ${article.count.praiseCount > 0 ? ' with-badge': ''} "
             th:data-target="${global.isLogin ? '' : '#loginModal'}"
             th:data-toggle="${global.isLogin ? '' : 'modal'}"
             id="praiseFloatBtn">
            <svg class="sprite-icon icon-zan">
                <use xlink:href="#icon-zan"></use>
            </svg>
        </div>

        <!-- 评论  -->
        <div th:badge="${article.count.commentCount > 0 ? article.count.commentCount: ''}"
             th:class="'panel-btn' + ${article.commented ? ' active': ''} + ${article.count.commentCount > 0 ? ' with-badge': ''}"
             id="commentFloatBtn">
            <svg class="sprite-icon icon-comment">
                <use xlink:href="#icon-comment"></use>
            </svg>
        </div>

        <!-- 收藏 -->
        <div th:badge="${article.count.collectionCount > 0 ? article.count.collectionCount: ''}"
             th:class="'panel-btn ' + ${article.collected ? ' active': ''} + ${article.count.collectionCount > 0 ? ' with-badge': ''} "
             th:data-target="${global.isLogin ? '' : '#loginModal'}"
             th:data-toggle="${global.isLogin ? '' : 'modal'}"
             id="collectFloatBtn">
            <svg class="sprite-icon icon-collect">
                <use xlink:href="#icon-collect"></use>
            </svg>
        </div>



        <!-- 分享 -->
        <div
                class="panel-btn"
                th:data-target="${global.isLogin ? '' : '#loginModal'}"
                th:data-toggle="${global.isLogin ? '' : 'modal'}"
                id="shareFloatBtn"
        >
            <svg class="sprite-icon icon-share">
                <use xlink:href="#icon-share"></use>
            </svg>
        </div>
    </div>

</div>

</html>